<template>
  <view class="activity-box">
    <!-- #ifdef H5 -->
    <uni-nav-bar :leftIcon="isShowShare ? 'left' : ''" statusBar @clickLeft="clickLeft" :border="false" :title="activeityDetail.activityName" fixed>
      <template #right>
        <img src="https://img.qumoyugo.com/webimgbg/pets-icon-share-fd.png" v-if="isShowShare"  class="img-nav-bar"
          @click="shareBridge">
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <img src="https://img.qumoyugo.com/webimgbg/pets-xiari-img1.jpg" style="width:100%;height: 1249rpx">
    <view @click="onclick" class="u-center" style="padding-top: 20px;">
      <img src="https://img.qumoyugo.com/img/L6QJQCXWF1IHJDHMPBYK61664528959007.png" style="width: 254rpx;height: 94rpx;">
    </view>
    <img src="https://img.qumoyugo.com/webimgbg/pets-xiari-img2.jpg" style="width:100%;height:1901rpx">
    <view @click="onclick" class="u-center" style="padding-top: 20px;">
      <img src="https://img.qumoyugo.com/img/L6QJQCXWF1IHJDHMPBYK61664528959007.png" style="width: 254rpx;height: 94rpx;">
    </view>
    <img src="https://img.qumoyugo.com/webimgbg/pets-xiari-img3.jpg" style="width:100%;height:998rpx">
  </view>
</template>
<script setup>
// #ifdef H5
import jsBridge from '@/utils/jsBridge'
// eslint-disable-next-line import/no-duplicates
import { cookie } from '@/utils/utils'
// #endif
// #ifdef MP-WEIXIN
// eslint-disable-next-line import/no-duplicates
import { storage } from '@/utils/utils'
// #endif
import { APP_STORAGE_COOKIE, TOKEN } from '@/assets/js/config'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'
import { useStore } from '@/store'
// #ifdef H5
const isShowShare = ref(false)
// #endif
const { $https } = getCurrentInstance().appContext.config.globalProperties
const activeityDetail = ref({})
const store = useStore()
const pageOntions = ref({})
onLoad((option) => {
  pageOntions.value = option
  // #ifdef H5
  if (store.state.isAPP) {
    isShowShare.value = true
  }
  // #endif
  $https({
    url: '/taskActivity/index/' + pageOntions.value.id,
    type: 'ac'
  }).then(res => {
    if (res.code === 0) {
      activeityDetail.value = res.data
      // #ifdef MP-WEIXIN
      uni.setNavigationBarTitle({
        title: res.data.activityName
      })
      // #endif
    }
  })
})
onShareAppMessage(() => {
  return {
    title: activeityDetail.value.activityName
  }
})
const onclick = () => {
  // #ifdef H5
  if (!cookie.get(APP_STORAGE_COOKIE)) {
    if (isShowShare.value) {
      jsBridge.webCallHandler('gotoPage', {
        data: {
          page: 'login',
          param: ''
        }
      })
    } else {
      uni.navigateTo({
        url: '/share/download'
      })
    }
    return false
  }
  // #endif
  // #ifdef MP-WEIXIN
  if (!storage.get(TOKEN)) {
    uni.reLaunch({
      url: `/pages/login?redirect=${encodeURIComponent('/activity/index')}`
    })
  }
  // #endif
  $https({
    url: '/taskActivity/signUp/' + pageOntions.value.id,
    type: 'ac',
    method: 'post'
  }).then(res => {
    if (res.code === 0) {
      uni.showToast({
        title: '报名成功',
        icon: 'none',
        success: () => {
          setTimeout(() => {
            // #ifdef H5
            jsBridge.webCallHandler('gotoPage', {
              data: {
                page: 'ActivityCenter'
              }
            })
            // #endif
            // #ifdef MP-WEIXIN
            uni.navigateBack({
              fail: () => {
                uni.switchTab({
                  url: '/pages/index'
                })
              }
            })
            // #endif
          }, 1500)
        }
      })
    }
  })
}
// #ifdef H5
const shareBridge = () => {
  jsBridge.webCallHandler('shareFrame', {
    data: {
      h5: {
        url: window.location.href,
        text: '快来《品客聚精彩》参加这个奖励超丰厚的活动吧~',
        title: activeityDetail.value.activityName,
        imageUrl: 'https://img.qumoyugo.com/webimgbg/pet-share-bg-activity1.png'
      }
    }
  })
}
const clickLeft = () => {
  if (isShowShare.value) {
    jsBridge.webCallHandler('navigateBack')
  }
}
// #endif
</script>
<style scoped lang="scss">
.img-nav-bar {
  width: 36rpx;
  height: 36rpx;
}
</style>
